<template>
  <px-scrollbar v-show="isView" class="view-equip-detail">
    <div class="view-task-detail">
      <div class="view-task-title">
        <px-button type="primary" icon="ArrowLeft" @click="emits('backMainPage')">返回</px-button>
        <div class="text">{{ code }}</div>
        <div class="status">
          <px-tag
            effect="plain"
            :style="{
              color: `${fontColorList[planData.taskStatus]}`,
              border: `1px solid ${tagBorderColorList[planData.taskStatus]}`,
              backgroundColor: `${tagBgColorList[planData.taskStatus]}`
            }"
          >
            {{ planData.taskStatusName }}
          </px-tag>
        </div>
      </div>
      <div>
        <px-button
          v-if="planData.taskStatus === '1' && planData.planDTO.userId === userInfo.userId"
          v-has="'ERC_EPM_ORDER_ALLOCATE'"
          type="primary"
          @click="isShow = true"
        >
          派发
        </px-button>
        <px-button
          v-if="planData.taskStatus === '2' && planData.planDTO.userId === userInfo.userId"
          v-has="'ERC_EPM_ORDER_EDIT'"
          type="primary"
          @click="isUploadShow = true"
          >上传合格证
        </px-button>
      </div>
    </div>
    <EditDropDownLight dropdownTitle="基础信息">
      <template v-slot:content>
        <div class="view-equip-wrap">
          <div class="view-equip-content">
            <div class="view-equip-item">
              <div class="label">计划开始时间</div>
              <div class="text">{{ planData.planDTO?.startDate }}</div>
            </div>
            <div class="view-equip-item">
              <div class="label">保养负责人</div>
              <div class="text">{{ planData.planDTO?.userName }}</div>
            </div>
            <div class="view-equip-item">
              <div class="label">执行公司</div>
              <div class="text">{{ planData.company }}</div>
            </div>
          </div>
          <div class="view-equip-content">
            <div class="view-equip-item">
              <div class="label">执行联络人</div>
              <div class="text">{{ planData.contact }}</div>
            </div>
            <div class="view-equip-item">
              <div class="label">联络人电话</div>
              <div class="text">{{ planData.phone }}</div>
            </div>
            <div class="view-equip-item">
              <div class="label">联络人邮箱</div>
              <div class="text">{{ planData.email }}</div>
            </div>
          </div>
          <div class="view-equip-content">
            <div class="view-equip-item">
              <div class="label">任务生成时间</div>
              <div class="text">{{ planData.createTime }}</div>
            </div>
            <div class="view-equip-item">
              <div class="label">任务派发时间</div>
              <div class="text">{{ planData.startDate }}</div>
            </div>
            <div class="view-equip-item">
              <div class="label">保养结束时间</div>
              <div class="text">{{ planData.endDate }}</div>
            </div>
          </div>
          <div class="view-equip-content">
            <div class="view-equip-item plus">
              <div class="label">所处地块</div>
              <div class="text">{{ planData.facName }}</div>
            </div>
          </div>
        </div>
      </template>
    </EditDropDownLight>
    <EditDropDownLight dropdownTitle="保养设备">
      <template v-slot:content>
        <px-table :data="selectEqpData" class="equip-table" style="margin-bottom: 10px" size="small" max-height="340px" border>
          <px-table-column type="index" label="序号" min-width="56" />
          <px-table-column prop="typeName" label="设备类型" min-width="234" show-overflow-tooltip />
          <px-table-column prop="eqpId" label="设备编号" min-width="234" show-overflow-tooltip />
          <px-table-column prop="eqpName" label="设备名称" min-width="234" show-overflow-tooltip />
          <!-- <px-table-column prop="facName" label="地块" min-width="234" show-overflow-tooltip /> -->
          <px-table-column prop="positionNameAll" label="安装位置" min-width="234" show-overflow-tooltip />
          <px-table-column prop="specification" label="规格型号" min-width="234" show-overflow-tooltip />
        </px-table>
      </template>
    </EditDropDownLight>
    <EditDropDownLight dropdownTitle="保养项目">
      <template v-slot:content>
        <px-table :data="selectItemsData" class="equip-table" style="margin-bottom: 10px" size="small" max-height="340px" border>
          <px-table-column type="index" label="序号" min-width="56" />
          <px-table-column prop="name" label="保养项目名称" min-width="240" show-overflow-tooltip />
          <px-table-column prop="standard" label="保养标准" min-width="400" show-overflow-tooltip>
            <template #default="scope">
              <span v-for="(item, index) in scope.row.attachmentList" :key="item.id">
                {{ item.originalName }}{{ scope.row.attachmentList?.length > 1 && index !== scope.row.attachmentList?.length - 1 ? "，" : "" }}
              </span>
            </template>
          </px-table-column>
          <px-table-column prop="confirmWayName" label="确认方式" min-width="150" show-overflow-tooltip />
          <px-table-column prop="createByName" label="创建人" min-width="150" show-overflow-tooltip />
          <px-table-column prop="createTime" label="创建时间" min-width="200" show-overflow-tooltip />
        </px-table>
      </template>
    </EditDropDownLight>
    <div v-if="planData.taskStatus === '3'">
      <EditDropDownLight dropdownTitle="合格证及备注">
        <template v-slot:content>
          <div class="view-equip-wrap">
            <div class="view-equip-content">
              <div class="view-equip-item plus">
                <div class="label">备注</div>
                <div class="text">{{ planData.remark }}</div>
              </div>
            </div>
          </div>
          <div class="sub-title">合格证</div>
          <div class="view-equip-content" style="margin-bottom: 24px">
            <FileUpload fileType="view" :fileData="{ moduleName: moduleName }" :fileList="planData.attachmentList" />
          </div>
        </template>
      </EditDropDownLight>
    </div>
    <AllocateDialog :code="planData.code" :visible="isShow" @closeDialog="isShow = false" @queryTable="queryTable" />
    <UploadFile :code="planData.code" :visible="isUploadShow" @closeDialog="isUploadShow = false" @queryTable="queryTable" />
  </px-scrollbar>
</template>

<script setup lang="ts">
import { getModuleName, queryOrderDetail, queryPlanEqp, queryPlanItems } from "@/api/erc/epm";
import FileUpload from "@/components/Upload/FileUpload.vue";
import EditDropDownLight from "@/views/all/equip/components/EditDropDownLight.vue";
import { computed, ref, watchEffect } from "vue";
import AllocateDialog from "./AllocateDialog.vue";
import UploadFile from "./UploadFile.vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable"]);

const props = defineProps(["code", "isView", "userInfo"]);

// 显示隐藏
const isView = computed(() => props.isView);

const selectEqpData = ref([]);
const selectItemsData = ref([]);
const moduleName = ref("");
const isShow = ref(false);
const isUploadShow = ref(false);
const planData = ref<Record<string, any>>({});

const fontColorList = {
  1: "#F59E0B",
  2: "#3B82F6",
  3: "#10B981"
};

const tagBorderColorList = {
  1: "#FCE2B6",
  2: "#C6E2FF",
  3: "#B7EAD9"
};

const tagBgColorList = {
  1: "#FEF5E6",
  2: "#ECF5FF",
  3: "#E8F8F3"
};

const getEqpItems = async () => {
  selectEqpData.value = await queryPlanEqp({ code: planData.value?.planDTO?.code });
  selectItemsData.value = await queryPlanItems({ code: planData.value?.planDTO?.code });
};

const queryTable = () => {
  emits("backMainPage");
  emits("queryTable");
};

// 获取getModuleName
const getModuleNameValue = async () => {
  const data = await getModuleName();
  moduleName.value = data;
};

const getOrderDetail = async () => {
  planData.value = await queryOrderDetail(props.code);
  getEqpItems();
};

watchEffect(() => {
  if (isView.value) {
    getModuleNameValue();
    getOrderDetail();
  }
});
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/view-detail.scss");

.view-equip-detail {
  padding: 20px;
}

.view-task-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;

  .view-task-title {
    // width: 25%;
    display: flex;
    flex-direction: row;
    align-items: center;

    .text {
      margin-right: 8px;
      margin-left: 16px;
      font-size: 20px;
      font-weight: 600;
      line-height: 1;
      color: rgb(0 0 0 / 90%);
    }
  }
}

.sub-title {
  position: relative;
  margin-bottom: 16px;
  margin-left: 16px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(0 0 0 / 80%);

  &::before {
    position: absolute;
    top: 50%;
    left: -16px;
    display: block;
    width: 3px;
    height: 16px;
    content: "";
    background: #3b82f6;
    border-radius: 0 100px 100px 0;
    transform: translateY(-50%);
  }
}
</style>
